package com.example.testcomposeproject.pages.verticalPager

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.testcomposeproject.PreViewData
import com.example.testcomposeproject.ui.theme.AppTheme
import kotlinx.coroutines.launch

/**
 * @author: hemin
 * @date: 2024/7/31
 * @Desc:
 */

@Preview(showBackground = true, device = PreViewData.PreviewPhoneSize)
@Composable
fun PreViewMyVerticalPager(modifier: Modifier = Modifier) {
    AppTheme {
        MyVerticalPager()
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MyVerticalPager() {
    val pagerState = rememberPagerState(pageCount = { 5 })
    val coroutineScope = rememberCoroutineScope()

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        VerticalPager(
            state = pagerState,
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp) // Adjust the height as needed
        ) { page ->
            // Content for each page
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp).background(
                        if (page%4 == 0) {
                            Color.Green
                        }else if (page%4 == 1) {
                            Color.Blue
                        }else if (page%4 == 2) {
                            Color.Red
                        }else if (page%4 == 3) {
                            Color.Black
                        }else {
                            Color.Yellow
                        }


                    ),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Page $page")
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // Controls to navigate pages
        Row {
            Button(onClick = {
                coroutineScope.launch {
                    pagerState.animateScrollToPage(pagerState.currentPage - 1)
                }
            }) {
                Text(text = "Previous")
            }

            Spacer(modifier = Modifier.width(8.dp))

            Button(onClick = {
                coroutineScope.launch {
                    pagerState.animateScrollToPage(pagerState.currentPage + 1)
                }
            }) {
                Text(text = "Next")
            }
        }
    }
}
